<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #table thead{text-align: center;font-weight: bold;}
        #table table{width: 400px;}
        fieldset {width: 400px;}
        fieldset legend{color: blue;}
    </style>
    <script src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
    function load(){
        $.ajax({
        url:"MovieListServlet",
                    type:"GET",
                    dataType: "json",
                    success: function (data) {
                $("#list").empty();
                for(var i = 0 ;i < data.length;i++){
                    var movie = data[i];
                    var line = "<tr><td>"+movie.title+"</td>"+
                            "<td>"+movie.director+"</td>"
                            +"<td>"+movie.dateReleased+"</td>"
                            +"</tr>";
                    $("#list").append(line);
                }
            },
            error:function(xhr){
                alert(xhr.status);
            }
        
        });
    };
        function submit(){
            var dataVal=$("#form").serialize();
            $.ajax({
                url:"MovieSaveServlet",
                type:"POST",
                data:dataVal,
                success:load
            });
        }
        $(function(){
        	load();
           $("#submit").click(function(){
           //验证输入
           $("input:text").each(function(){
            if($(this).val()==""){
                $("label").text("电影名称、导演和上映日期不能为空");
                return false;
            }
            });
               submit();
           });
            $("#reset").click(function(){
            	$("input:text").each(function(){
            	$(this).val("");
            	});
            });
        });
   		

    </script>
</head>
<body>
    <fieldset>
        <legend>填写留言</legend>
        <form id="form">
        <table>
            <tr>
                <td>电影名称：</td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td>导演：</td>
                <td><input type="text" name="director"/></td>
            </tr>
            <tr>
                <td>上映日期：</td>
                <td><input type="text" name="date"/></td>
            </tr>
            <tr>
                <td><input type="button" value="提交" id="submit"/></td>
                <td><input type="button" value="重置" id="reset"/><label style="color:red"></label></td>
            </tr>
        </table>
        </form>
    </fieldset>
    <hr/>
    <div id="table">
        <table border="1">
            <thead>
            <tr>
                <th>电影名称</th>
                <th>导演</th>
                <th>上映日期</th>
            </tr>
            </thead>
            <tbody id="list">
                
            </tbody>
        </table>
    </div>
</body>
</html>